<template>
  <div class="FooterMusic">
    <div class="footerLeft" @click="updateDetailShow()">
      <img :src="playList[playListIndex].al.picUrl"/>
      <div>
        <p>{{ playList[playListIndex].name }}</p>
        <span>横滑可以切换上下首哦</span>
      </div>
    </div>
    <div class="footerRight">
      <svg class="icon" aria-hidden="true" v-if="isBtnShow" @click="play">
        <use xlink:href="#icon-bofanganniu"></use>
      </svg>
      <svg class="icon" aria-hidden="true" v-else @click="play">
        <use xlink:href="#icon-bofang2"></use>
      </svg>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-zu"></use>
      </svg>
      <audio
        ref="audio"
        :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3 `"
      ></audio>
      <van-popup
        v-model:show="detailShow"
        position="right"
        :style="{ width: '100%', height: '100%'}"
      >
      <MusicDetail :musicList="playList[playListIndex]" :play="play" :addDuration="addDuration"></MusicDetail>
      </van-popup>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex"
import MusicDetail from "./MusicDetail.vue"
export default {
  data(){
    return{
       timer:null
    }
  },
  computed: {
    ...mapState(["playList", "playListIndex", "isBtnShow", "detailShow"]),
  },
  watch: {
    playListIndex() {
      this.$refs.audio.autoplay = true
      if (this.$refs.audio.paused) {
        this.updateIsBtnShow(false)
      }
    },
    playList() {
      if (this.isBtnShow) {
        this.$refs.audio.autoplay = true
        this.updateIsBtnShow(false)
      }
    },
  },
  methods: {
    ...mapMutations([
     "updateIsBtnShow",
     "updateDetailShow",
     'updateCurrentTime',
     'updateDuration']),
    play() {
      if (this.$refs.audio.paused) {
        this.$refs.audio.play()
        this.updateIsBtnShow(false)
        this.updateTime()   
      } else {
        this.$refs.audio.pause()
        this.updateIsBtnShow(true)
        clearInterval(this.timer)
      }
    },
    addDuration(){
      this.updateDuration(this.$refs.audio.duration)
    },
    updateTime(){
      this.timer = setInterval(()=> {
        this.updateCurrentTime(this.$refs.audio.currentTime)
      }, 1000);
    }
  },
  components:{MusicDetail},
  updated(){
    this.$store.dispatch('getLyric',this.playList[this.playListIndex].id)
    this.addDuration()
  },
  mounted(){
    this.$store.dispatch('getLyric',this.playList[this.playListIndex].id)
    this.addDuration()
  }
};
</script>
<style lang="scss" scoped>
.FooterMusic {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1rem;
  background-color: #fff;
  border-top: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
  .footerLeft {
    display: flex;
    //justify-content: space-between;
    align-items: center;
    width: 80%;
    height: 100%;
    img {
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 50%;
      display: block;
    }
    div {
      margin-left: 0.1rem;
      float: left;
      span {
        font-size: 0.24rem;
        color: #ccc;
      }
    }
  }
  .footerRight {
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
